import React ,{Component,Fragment} from 'react';
import { Layout } from 'antd';
const { Header } = Layout;
class DataDemand extends Component{
    constructor(props){
        super(props)
        this.state={
            list:['zzzz','<h1>zzz</h1>']
        }
    }
    componentDidMount() {
        console.log("demo")
    }
    render(){
        return(
            <Fragment>
                {/* Fragment类似于vue的template，当最外层包裹不想要用div时 */}
                <label htmlFor="inputId">焦点12对接</label>
                <input id="inputId"></input>
                <Layout className="homePage">
                    <Header>首12页</Header>
                    <ul>
                        {
                            this.state.list.map((item,index)=>{
                                return(
                                    //注意尽量不要用index作为key值
                                    <li key={index}>{item}</li>
                                )
                            })
                        }
                    </ul>
                    {/*有一个方法可以解析html */}
                    <ul>
                        {
                            this.state.list.map((item,index)=>{
                                return(
                                    //注意尽量不要用index作为key值
                                    <li 
                                        key={index}
                                        dangerouslySetInnerHTML={{__html:item}}
                                    >
                                    </li>
                                )
                            })
                        }
                    </ul>
                </Layout>
                
            </Fragment>
        )
    }
}

export {DataDemand};
